<template>
    <div v-if="isHospitalManager== 0" class="mod-demo-echarts">
      <el-row>
        <h1>抽查次数统计</h1>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="24">
          <el-card>
            <div id="J_chartBarBox" class="chart-box"></div>
          </el-card>
        </el-col>
      </el-row>

    </div>
  <div v-else style="text-align: center;color: #5daf34">
    <h1>欢迎使用滦平县医保局在线查房系统</h1>
  </div>

</template>

<script>
    import echarts from 'echarts'

    export default {
        data() {
            return {
                chartBar: null,
                monthCount: 0,
                totalCount: 0,
                data: [],
                series: [],
                isHospitalManager: this.$cookie.get('isHospitalManager')
            }
        },
        mounted() {
            this.$http({
                url: this.$http.adornUrl('/bs/index/getData'),
                method: 'get',
                // params: this.$http.adornParams()
            }).then(({data}) => {
                console.log(data)
                this.data = []
                this.series = []
                for (var i = 0; i < data.res.length; i++) {
                    var item = data.res[i];
                    this.data.push(item.hospitalName)
                    var object = new Object();
                    object.name = item.hospitalName
                    object.type = 'bar'

                    var extraNumArr = []
                    extraNumArr.push(item.extraNum)
                    object.data = extraNumArr
                    this.series.push(object)
                }

                this.initChartBar()
            })
        },
        activated() {
            // 由于给echart添加了resize事件, 在组件激活时需要重新resize绘画一次, 否则出现空白bug
            if (this.chartBar) {
                this.chartBar.resize()
            }
        },

        methods: {
            // 柱状图
            initChartBar() {

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: JSON.parse(JSON.stringify(this.data))
                        // data: ['总抽取次数', '本月抽取次数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['次数统计结果']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    // series: [
                    //     {
                    //         name: '总抽取次数',
                    //         type: 'bar',
                    //         data: [this.totalCount]
                    //     },
                    //     {
                    //         name: '本月抽取次数',
                    //         type: 'bar',
                    //         data: [this.monthCount]
                    //     }
                    // ]
                    series: JSON.parse(JSON.stringify(this.series))
                    // series: this.series
                }
                this.chartBar = echarts.init(document.getElementById('J_chartBarBox'))
                this.chartBar.setOption(option)
                window.addEventListener('resize', () => {
                    this.chartBar.resize()
                })
            }
        }
    }
</script>

<style lang="scss">
  .mod-demo-echarts {
    > .el-alert {
      margin-bottom: 10px;
    }

    > .el-row {
      margin-top: -10px;
      margin-bottom: -10px;

      .el-col {
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }

    .chart-box {
      min-height: 400px;
    }
  }
</style>
